
import * as React from "react";
import {memberAPI} from '../../api/member';

interface Props {

}
interface State {
    members:[]
}

// 泛指内部的重要类型，去约束它
export class MembersPage extends React.Component<Props,State> {

    constructor(props){

        super(props);
        this.state = {
            members:[]
        }

    }

    public conponentDidMount() {

        memberAPI.fetchMembers()
            .then(members => {
                console.log(members);
            })
    }

    

    render() {

        return (
            <div>
                <h2> MemberPage </h2>
                <table className="table">
                    <tbody>
                        {this.state.members.map(MemberRow)}
                    </tbody>
                </table>
            </div>
        )
            
        
    }


    
}

const MemberRow = (member) => {

    <tr key={member.id}>
        <td>
            <img src={member.avatar_url}></img>

        </td>
        <td>
            <span>{member.id}</span>
        </td>
        <td>
            <span>{member.login}</span>
        </td>
    </tr>
}